<template>
  <div>
    <el-container>
      <el-aside>
        <el-tree :data="databaseList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-aside>
      <el-main>
        <el-button-group>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="openEditDialog()">新建</el-button>
          <el-button size="small" icon="el-icon-upload2" @click="openInputTableDialog()">从数据库导入</el-button>
          <el-button size="small" icon="el-icon-upload2" :disabled="selectedTable.length!==1" @click="openGenDialog()">生成代码</el-button>
        </el-button-group>
        <el-table :data="tableList" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="tableName" label="表名"/>
          <el-table-column prop="tableType" label="表类型"/>
          <el-table-column prop="databaseName" label="数据库名称"/>
          <el-table-column prop="tableDesc" label="表描述"/>
          <el-table-column prop="className" label="类名"/>
          <el-table-column prop="leaderTableId" label="主表id"/>
          <el-table-column prop="syncState" label="同步状态"/>
          <el-table-column label="操作" fixed="right" width="300">
            <template slot-scope="{row,$index}">
              <el-button type="text" @click="openEditDialog(row)">修改</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button type="text">同步数据库</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <InputTable ref="inputTable"></InputTable>
    <EditDialog ref="editDialog"></EditDialog>
    <GenDialog ref="genDialog"></GenDialog>
  </div>

</template>

<script>

  import linkApi from '@/api/database/link'
  import tableApi from "@/api/database/table";
  import InputTable from "./inputTable";
  import EditDialog from "./editDialog";
  import {Notification} from 'element-ui';
  import GenDialog from "./genDialog";

  export default {
    components: {GenDialog, EditDialog, InputTable},
    head() {
      return {
        title: '关于'
      }
    },
    data() {
      return {
        selectedDatabase: {},
        selectedTable: [],
        databaseList: [],
        tableList: [],
        defaultProps: {
          label: 'linkName'
        }
      }
    },
    created() {
      this.getDatabaseList();
    },
    methods: {
      handleSelectionChange(val){
        console.log(val);
        this.selectedTable = val;

      },
      findAllTable() {
        tableApi.findAllByDatabaseId(this.selectedDatabase.id).then(res => {
          this.tableList = res.data;
        })
      },
      handleDelete(data) {
        tableApi.deleteOne(data.id).then(res => {
          if (res.success) {
            Notification({
              title: '成功',
              message: '删除数据成功!',
              type: 'success',
              duration: 2000
            });
            this.findAllTable();
          } else {
            Notification({
              title: '失败',
              message: '删除数据失败!',
              type: 'error',
              duration: 2000
            })
          }
        });
      },
      getDatabaseList() {
        linkApi.findAll().then(res => {
          console.log(res);
          this.databaseList = res.data;
        })
      },
      handleNodeClick(data) {
        this.selectedDatabase = data;
        this.findAllTable();
      },
      openInputTableDialog() {
        this.$refs.inputTable.openDialog();
      },
      openEditDialog(data) {
        this.$refs.editDialog.openDialog(data);
      },
      openGenDialog() {
        this.$refs.genDialog.openDialog(this.selectedTable[0]);
      }
    }
  }
</script>

<style scoped>

</style>
